<template>
  <div class="home">
    <!-- 顶部导航 -->
    <nav-bar class="home-navbar">
      <template v-slot:center><div>购物街</div></template>
    </nav-bar>
    
    <!-- 内容区域 -->
    <div class="content">
      <!-- 轮播图 -->
      <home-swiper :banners="banners"> </home-swiper>
      <!-- 推荐 -->
      <recommend-view :recommends="recommends"> </recommend-view>
      <!-- 本周流行 -->
      <feature-view></feature-view>
      <!-- 好物分类 -->
      <tab-control :titles="['流行', '新款', '精选']"></tab-control>
      <!-- 好物推荐 -->
      <good-list :goods="goods"></good-list>
    </div>

  </div>
</template>

<script>
import NavBar from "@/components/common/navbar/NavBar";

import TabControl from "@/components/content/tabControl/TabControl.vue";

import HomeSwiper from "./childComps/HomeSwiper";
import RecommendView from "./childComps/RecommendView.vue";
import FeatureView from "./childComps/FeatureView.vue";
import GoodList from './childComps/GoodList.vue';

import { getHomeMultidata, getHomeGoodData } from "@/network/home";

export default {
  data() {
    return {
      banners: [],
      recommends: [],
      goods: [
        {
          img: 'https://s11.mogucdn.com/mlcdn/c45406/200803_5103i30i9c5197l8082li3k4751kf_640x960.jpg_750x1000.v1cAC.81.jpg',
          title: "拍5免4【欣儿star】夏季新品超薄防掉跟隐形袜冰丝任意剪女袜",
          price: "89.49",
          stored: 38
        },
        {
          img: 'https://s11.mogucdn.com/mlcdn/55cf19/210521_12eka3b44kega78akhf80al73609h_640x962.png_750x1000.v1cAC.81.jpg',
          title: "拍5免4【欣儿star】夏季新品超薄防掉跟隐形袜冰丝任意剪女袜",
          price: "89.49",
          stored: 138
        },
        {
          img: 'https://s11.mogucdn.com/mlcdn/c45406/200803_5103i30i9c5197l8082li3k4751kf_640x960.jpg_750x1000.v1cAC.81.jpg',
          title: "拍5免4【欣儿star】夏季新品超薄防掉跟隐形袜冰丝任意剪女袜",
          price: "89.49",
          stored: 38
        },
        {
          img: 'https://s11.mogucdn.com/mlcdn/55cf19/210521_12eka3b44kega78akhf80al73609h_640x962.png_750x1000.v1cAC.81.jpg',
          title: "拍5免4【欣儿star】夏季新品超薄防掉跟隐形袜冰丝任意剪女袜",
          price: "89.49",
          stored: 38
        },
        {
          img: 'https://s11.mogucdn.com/mlcdn/c45406/200803_5103i30i9c5197l8082li3k4751kf_640x960.jpg_750x1000.v1cAC.81.jpg',
          title: "拍5免4【欣儿star】夏季新品超薄防掉跟隐形袜冰丝任意剪女袜",
          price: "89.49",
          stored: 38
        },
        {
          img: 'https://s11.mogucdn.com/mlcdn/55cf19/210521_12eka3b44kega78akhf80al73609h_640x962.png_750x1000.v1cAC.81.jpg',
          title: "拍5免4【欣儿star】夏季新品超薄防掉跟隐形袜冰丝任意剪女袜",
          price: "89.49",
          stored: 698
        },
        {
          img: 'https://s11.mogucdn.com/mlcdn/c45406/200803_5103i30i9c5197l8082li3k4751kf_640x960.jpg_750x1000.v1cAC.81.jpg',
          title: "拍5免4【欣儿star】夏季新品超薄防掉跟隐形袜冰丝任意剪女袜",
          price: "89.49",
          stored: 38
        },
        {
          img: 'https://s11.mogucdn.com/mlcdn/55cf19/210521_12eka3b44kega78akhf80al73609h_640x962.png_750x1000.v1cAC.81.jpg',
          title: "拍5免4【欣儿star】夏季新品超薄防掉跟隐形袜冰丝任意剪女袜",
          price: "89.49",
          stored: 38
        }
      ],
    };
  },
  created() {
    getHomeMultidata()
      .then((result) => {
        console.log(result);
        this.banners = result.data.banner.list;
        this.recommends = result.data.recommend.list;
      })
      .catch((err) => {});

    getHomeGoodData()
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    transitionEnd(index) {},
  },
  components: {
    NavBar,
    HomeSwiper,
    RecommendView,
    FeatureView,
    TabControl,
    GoodList,
  },
};
</script>

<style scoped>
.home-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--color-tint);
  text-align: center;
  z-index: 9;
}

.home {
  height: 100vh;
  position: relative;
}

/* 
  计算中间内容高度的技巧
  整个区域使用 relative 开启定位
  中间内容设置 开启absolute定位，设置top 和 bottom
  如果中间内容可以滚动 overflow-（可滚动方向):scroll
*/
.content {
  /* overflow: hidden; */
  overflow-y: scroll;
  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
}

</style>